/*
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\components\SettledReviewModal\index.tsx
 * @Date: 2021-07-09 11:25:54
 * @LastEditTime: 2021-09-24 15:09:29
 */
import React, { useState } from 'react'
import { UdModalForm, validators } from '@/lib'
import { message, Input, Radio, Upload, Button, Icon } from 'antd'
import ossHttp from '@/utils/oss'
import { getOssFileKey } from '@/utils/methods'
import UploadImgButton from '../UploadImgButton'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import UdSelect from "@/components/UdFormControls/UdSelect"

const TextArea = Input.TextArea
let deleteFiles = []

export default function (props) {
  const { updateDeleteFiles, updateFiles, items = [], ...reset  } = props
  const [annexFile, setAnnexFile] = useState([])
  const [isValid, setIsValid] = useState(undefined)
  const[chosedList,setChosedList]=useState([])
  // 附件上传
  const annexFileUpload = (file) => {
    const isJPNPNG = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJPNPNG) {
      message.error('只能上传.jpg和.png格式图片')
      return false
    }
    const { name: fileName, uid } = file
    setAnnexFile([{
      uid,
      name: fileName,
      status: 'uploading',
    }])
    ossHttp.put('settled-review/annex', file).then(res => {
      const { url } = res
      const file = {
        uid,
        name: fileName,
        status: 'done',
        url,
      }
      setAnnexFile([file])
      updateFiles([file])
    })
    return false
  }
  // 附件删除
  const annexFileRemove = (file) => {
    const { url } = file
    const key = getOssFileKey(url)
    if (needDelete(key)) {
      deleteFiles = [...deleteFiles, key]
      ossHttp.deleteMulti(deleteFiles)
    }
    setAnnexFile(null)
    return true
  }
  // 判断是否需要删除oss上的文件
  const needDelete = (key) => {
    if (!deleteFiles.includes(key)) {
      return true
    }
    return false
  }

  let formItems = isValid == 1 ? [] : items // 审批通过才需要选择其他项（下一审批人）

  return (
    <UdModalForm {...reset} items={[
      { id: 'isValid', label: '审批状态', rules: [{ required: true, message: '请选择状态' }], render: <RadioCm onChange={(e) => setIsValid(e.target.value)} /> },
      { id: 'comment', label: '审批意见', rules: [validators.max(100), validators.noSpecialSymbol], render: <TextArea placeholder='请填写审批意见（限100字）' /> },
      {
        id: 'files', label: '凭证附件', extra: '支持扩展名：.jpg .png', render: (
          <Upload
            beforeUpload={annexFileUpload}
            listType="picture-card"
            fileList={annexFile}
            onRemove={annexFileRemove}
          >
            {(!annexFile || !annexFile.length) ? <UploadImgButton /> : null}
          </Upload>
        )
      },
      // { label: '下一节点审批人', id: 'chosedBusinessPerson',  rules: [validators.required, validators.max(64)], render: () => {
      //   return <UdSelect options={chosedList} labelInValue placeholder=" " showSearch={true}  />
      // } },
      ...formItems,
    ]} />
  )
}

function RadioCm(props) {
  return (
    <Radio.Group onChange={props.onChange} value={props.value}>
      <Radio value={0}>通过</Radio>
      <Radio value={1}>不通过</Radio>
    </Radio.Group>
  )
}
